<template>
  <div>
  <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>
  <div id="xlsxChart" style="width: 100%;height: 600%;"></div>
  </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "radar",
      data() {
        return {
          tableData: [],
          settings: {},
          myChart: null,
          xLength: null,
          yLength:null,
          outdata: null,
        };
      },

      mounted(){
        this.settings = this.$route.query.a
        this.yLength = this.$route.query.b
        this.xLength = this.$route.query.c
        this.outdata = this.$route.query.d
        this.updateChart()
      },

      methods:{
        //初始化echartInstance对象
        initChart(){
          this.myChart = echarts.init(document.getElementById('xlsxChart'));
        },
        //更新图标
        updateChart(){
          const yL = this.yLength
          const xL = this.xLength
          const km = this.settings.colHeaders
          const odata = this.outdata
          const option = {
            title: {
              text: '雷达图',
              top: 10,
              left: 10
            },
            tooltip: {
              trigger: 'item',
              backgroundColor: 'rgba(0,0,250,0.2)'
            },
            legend: {
              type: 'scroll',
              bottom: 10,
              data: (function() {
                var list = [];
                for (var i = 1; i <= yL; i++) {
                  list.push(odata[i][0]);
                }
                return list;
              })()
            },
            visualMap: {
              top: 'middle',
              right: 10,
              color: ['red', 'yellow'],
              calculable: true
            },
            radar: {
              indicator: (function() {
                var indicator = [];
                for (var i = 1; i <= xL-1; i++) {
                  indicator.push({
                    text: km[i]
                  });
                }
                console.log("@@@@@@@@@@@@@@@", indicator)
                console.log("!!!!!!!!!!!!", odata[1][1])
                return indicator;
              })()
            },
            series: (function() {
              var series = [];
              for (var i = 1; i <= yL; i++) {
                series.push({
                  name: '浏览器（数据纯属虚构）',
                  type: 'radar',
                  symbol: 'none',
                  data: [{
                    value: [
                      odata[i][1],
                      odata[i][2],
                      odata[i][3],
                      odata[i][4],
                      odata[i][5],
                      odata[i][6],
                      odata[i][7],
                      odata[i][8],
                      odata[i][9],
                      odata[i][10],
                      odata[i][11],
                      odata[i][12], odata[i][13], odata[i][14],
                      odata[i][15], odata[i][16], odata[i][17],
                      odata[i][18], odata[i][19], odata[i][20],
                    ],
                    name: odata[i][0],
                  }]
                });
              }
              console.log("sadasdasdas", series)
              return series;
            })()
          }
          let myChart = echarts.init(document.getElementById('xlsxChart'));
          myChart.setOption(option)
        },
      }
    }

</script>

<style scoped>

</style>
